<script setup>
import { ref, computed } from 'vue'

// 找回密码类型
let findPasswordTypeId = ref(0)

//找回密码类型列表
let findPasswordTypeList = ref({
    "phone": { id: 0, name: "手机号找回密码" },
    "email": { id: 1, name: '邮箱找回密码' }
})

//test:email
// findPasswordTypeId.value = findPasswordTypeList.value.email.id


// 获取找回密码类型标题类
let getTypeTitleActiveClass = (typeTitleId) => {
    return findPasswordTypeId.value == typeTitleId ? { color: '#4580DD' } : {}
}

// 切换找回密码类型标题
let typeTitleActiveChange = (e) => {

    //注意dataset内变量名默认小写
    findPasswordTypeId.value = e.target.dataset.typetitleid
}

//获取类型条的位置类
let getTypeBarActivePosClass = (typeId) => {
    let typeBarActivePosClass = {}
    if (typeId == findPasswordTypeList.value.phone.id) {
        typeBarActivePosClass.left = '0'
    } else if (typeId == findPasswordTypeList.value.email.id) {
        typeBarActivePosClass.right = '0'
    }
    return typeBarActivePosClass
}

//是否处于倒计时
let isCodeCountDown = ref({
    phone: false,
    email: false
})

//倒计时数字
let CodeCountDownNum = ref({
    phone: 0,
    email: 0
})

// 获取短信验证码按钮文字
let phoneCodeBtuText = computed(() => {
    return isCodeCountDown.value.phone ? `${CodeCountDownNum.value.phone} s` : '获取短信验证码'
})

//获取邮箱验证码按钮文字
let emailCodeBtuText = computed(() => {
    return isCodeCountDown.value.email ? `${CodeCountDownNum.value.email} s` : '获取邮箱验证码'
})

//短信验证码按钮点击事件
let phoneCodeBtuClick = (count) => {

    if (isCodeCountDown.value.phone) {
        return
    }

    isCodeCountDown.value.phone = true
    CodeCountDownNum.value.phone = count

    let timer = setInterval(() => {
        CodeCountDownNum.value.phone--
        if (CodeCountDownNum.value.phone == 0) {
            setTimeout(() => {
                isCodeCountDown.value.phone = false
    
            }, 1000)
             clearInterval(timer)
        }
    }, 1000)
}

//获取短信验证码按钮文字样式
let phoneCodeBtuTextClass = computed(() => {
    return isCodeCountDown.value.phone ? { "font-size": '20px' } : {}
})

//邮箱验证码按钮点击事件
let emailCodeBtuClick = (count) => {

    if (isCodeCountDown.value.email) {
        return
    }

    isCodeCountDown.value.email = true
    CodeCountDownNum.value.email = count


    let timer = setInterval(() => {
        CodeCountDownNum.value.email--
        if (CodeCountDownNum.value.email== 0) {
            setTimeout(() => {
                isCodeCountDown.value.email = false
                
            }, 1000)
            clearInterval(timer)
        }
    },1000)
}

//邮箱验证码按钮文字样式
let emailCodeBtuTextClass = computed(() => {
    return isCodeCountDown.value.email ? { "font-size": '20px' } : {}
})

</script>
<template>
    <div class="findPassword-page-class">
        <div class="findPassword-page-class-content">
            <div class="findPassword-page-board">
                <div class="findPassword-page-board-inner">
                    <div class="findPassword-page-title">找回密码</div>
                    <div class="findPassword-page-type">
                        <div class="findPassword-page-type-title" @click="typeTitleActiveChange">
                            <div class="findPassword-page-type-title-phone" :data-typetitleid="findPasswordTypeList.phone.id"
                                :style="getTypeTitleActiveClass(findPasswordTypeList.phone.id)">手机找回</div>
                            <div class="findPassword-page-type-title-email" :data-typetitleid="findPasswordTypeList.email.id"
                                :style="getTypeTitleActiveClass(findPasswordTypeList.email.id)">邮箱找回</div>
                        </div>
                        <div class="findPassword-page-type-bar">
                            <div class="findPassword-page-type-bar-line"></div>
                            <div class="findPassword-page-type-bar-active"
                                :style="getTypeBarActivePosClass(findPasswordTypeId)"></div>
                        </div>

                        <div class="findPassword-page-inputs">
                            <div class="phone-findPassword-box" v-if="findPasswordTypeId == findPasswordTypeList.phone.id">
                                <div class="findPassword-page-input-phone-box">
                                    <!-- 下拉选择框 -->
                                    <select name="findPasswordPageInputPhoneSelect" id="findPasswordPageInputPhoneSelectId"
                                        class="findPasswordPageInputPhoneSelectClass">
                                        <option value="中国 +86">中国 +86</option>
                                    </select>
                                    <input type="text" class="phonefindPasswordPhoneInputClass"
                                        name="phonefindPasswordPhoneInput" placeholder="请输入手机号"
                                        id="phonefindPasswordPhoneInputId">
                                </div>
                                <div class="findPassword-page-input-phone-warn">提示在这里!</div>

                                <div class="findPassword-page-input-phone-code-box">
                                    <!-- 短信验证码输入框 -->
                                    <input type="text" class="phonefindPasswordPhoneCodeInputClass"
                                        name="phonefindPasswordPhoneCodeInput" placeholder="请输入短信验证码"
                                        id="phonefindPasswordPhoneCodeInputId"></input>
                                    <div class="findPassword-page-input-phone-code-btn" @click="phoneCodeBtuClick(60)"
                                        :style="phoneCodeBtuTextClass">{{
                                            phoneCodeBtuText }}</div>
                                </div>
                                <div class="findPassword-page-input-phone-code-warn">提示在这里!</div>

                            </div>
                            <div class="email-findPassword-box" v-else>
                                <div class="findPassword-page-inputs">
                                    <div class="findPassword-page-input-email-box">
                                        <input type="text" class="emailfindPasswordEmailInputClass"
                                            name="emailfindPasswordEmailInput" placeholder="请输入邮箱账号"
                                        />
                                    </div>
                                    <div class="findPassword-page-input-email-warn">提示在这里!</div>
                                    <div class="findPassword-page-input-email-code-box">
                                        <input type="text" class="emailfindPasswordEmailCodeInputClass"
                                            name="emailfindPasswordEmailCodeInput" placeholder="请输入邮箱验证码"
                                        />
                                        <div class="findPassword-page-input-email-code-btn" @click="emailCodeBtuClick(60)" :style="emailCodeBtuTextClass">{{ emailCodeBtuText }}</div>
                                    </div>
                                    <div class="findPassword-page-input-email-code-warn">提示在这里!</div>
                                </div>
                            </div>
                        </div>
                    
                        <div class="yeap-button">确定</div>
                     
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<style scoped>
.findPassword-page-class {
    width: calc(100vw - 110px);
    /* height: calc(100vh - 103px); */
    cursor: pointer;
}

.findPassword-page-class-content {
    margin: 0 auto;
    width: 1400px;
    /* background-color: antiquewhite; */
}

.findPassword-page-board {
    margin: 0 auto;
    margin-top: 90px;
    width: 900px;
    height: 770px;
    background-color: white;
    border-radius: 42px;
}

.findPassword-page-board-inner {
    margin: 0 auto;
    width: 560px;
    height: 100%;
    /* background-color: aquamarine; */
    padding-top: 30px;
}

.findPassword-page-title {
    font-size: 42px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    color: rgba(0, 0, 0, 1);
    padding-top: 50px;
    letter-spacing: 6px;
    margin-bottom: 50px;
}

.findPassword-page-type-title {
    display: flex;
    justify-content: space-between;
    margin: 0px 50px;
    font-size: 23px;
}

.findPassword-page-type-title-phone,
.findPassword-page-type-title-email {
    cursor: pointer;
    /* font-weight: 550; */
}

.findPassword-page-type-bar {
    width: 100%;
    height: 4px;
    position: relative;
}

.findPassword-page-type-bar {
    margin-top: 20px;
    width: 100%;
    height: 4px;
    background-color: #D8D8D8;
}

.findPassword-page-type-bar-active {
    position: absolute;
    /* left: 0; */
    /* right: 0; */
    width: 35%;
    height: 4px;
    background-color: #4580DD;
}

.phonefindPasswordPhoneInputClass,
.phonefindPasswordPhoneCodeInputClass {
    width: 100%;
    height: 70px;
    border: 2px solid rgba(0, 0, 0, 0.6);
    line-height: 70px;
    font-size: 20px;
}

.phonefindPasswordPhoneInputClass {
    padding-left: 120px;
    margin-bottom: 10px;
}

.phonefindPasswordPhoneCodeInputClass {
    padding-left: 20px;
    margin-bottom: 10px;
}

.findPassword-page-inputs {
    margin-top: 58px;
}

.findPassword-page-input-phone-warn {
    margin-bottom: 10px;
    color: red;
}

.findPassword-page-input-phone-code-warn {
    margin-bottom: 10px;
    color: red;
}

.findPasswordPageInputPhoneSelectClass {
    position: absolute;
    top: 5px;
    left: 10px;
    /* 无边框 */
    border: none;
    width: 100px;
    height: 60px;
    font-size: 16px;
}

/* TODO:需要去掉下拉框选择的边框，没生效待解决 */
.findPasswordPageInputPhoneSelectClass::active {
    outline: none;
}

.findPassword-page-input-phone-box,
.findPassword-page-input-phone-code-box {
    position: relative;
}

.findPassword-page-input-phone-code-btn {
    position: absolute;
    width: 150px;
    height: 60px;
    right: 5px;
    top: 5px;
    line-height: 60px;
    text-align: center;
    color: white;
    background-color: #4580DD;
    font-size: 16px;
    border-radius: 3px;
}



.yeap-button{
    width: 100%;
    height: 70px;
    text-align: center;
    line-height: 70px;
    background-color: #4580DD;
    color: white;
    font-size: 20px;
    margin-top: 30px;
}

.emailfindPasswordEmailInputClass,.emailfindPasswordEmailCodeInputClass{
    width: 100%;
    height: 70px;
    border: 2px solid rgba(0, 0, 0, 0.6);
    line-height: 70px;
    font-size: 20px;
    padding-left: 20px;
    margin-bottom: 10px;
}

.findPassword-page-input-email-code-warn,.findPassword-page-input-email-warn{
    margin-bottom: 10px;
    color: red;
}

.findPassword-page-input-email-code-btn{
    position: absolute;
    width: 150px;
    height: 60px;
    right: 5px;
    top: 5px;
    line-height: 60px;
    text-align: center;
    color: white;
    background-color: #4580DD;
    font-size: 16px;
    border-radius: 3px;
}

.findPassword-page-input-email-box,.findPassword-page-input-email-code-box{
    position: relative;
}
</style>